import 'package:flutter/material.dart';
import 'package:we_chat/pages/chat/search_page.dart';
import 'package:we_chat/pages/const.dart';
import 'package:we_chat/pages/chat/chat_page.dart';

class SearchCell extends StatelessWidget {
  final List<Chat> datas;
  SearchCell({required this.datas});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        Navigator.of(context).push(
          MaterialPageRoute(builder: (context){
            return SearchPage(datas: datas,);
          }),
        );
      },
      child: Container(height: 34,color: WeChatThemeColor,
        padding: EdgeInsets.only(left: 5,right: 5,bottom: 5),
        child: Stack(
          alignment: Alignment.center,
          children: [
            //白色背景
            Container(
              decoration: BoxDecoration(//白色背景
                color: Colors.white,
                borderRadius: BorderRadius.circular(5),
              ),
            ),
            //文字和图片
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Image(image: AssetImage('images/放大镜b.png'),width: 15,color: Colors.grey,),
                Text('  搜索',style: TextStyle(fontSize: 15,color: Colors.grey),)
              ],
            )
          ],
        ),
      ),
    );
  }
}


class SearchBar extends StatefulWidget {
  //回调
  final ValueChanged<String>? onChange;
  SearchBar({this.onChange});

  @override
  State<SearchBar> createState() => _SearchBarState();
}

class _SearchBarState extends State<SearchBar> {
  final TextEditingController _textController = TextEditingController();
  bool _showClear = false;
  _onChange(String text){
    if(text.length > 0){
      _showClear = true;
      if(widget.onChange != null){
        widget.onChange!(text);
      }

    } else {
      if(widget.onChange != null){
        widget.onChange!('');
      }
      _showClear = false;
    }
    setState((){

    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 84,
      color: Colors.grey,
      child: Column(
        children: [
          SizedBox(height: 40,),
          Container(
            height: 44,
            child: Row(
              children: [
                Container(
                  width: ScreenWidth(context)-40,
                  height: 34,
                  margin: EdgeInsets.only(left: 5),
                  padding: EdgeInsets.only(left: 5,right: 5),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(6),
                  ),
                  child: Row(
                    children: [
                      Image(image: AssetImage('images/放大镜b.png'),
                        width: 20,color: Colors.grey,),
                      Expanded(flex: 1,
                          child: TextField(
                            controller: _textController,
                        onChanged: _onChange,
                        //光标颜色
                        cursorColor: Colors.green,
                        style: TextStyle(fontSize: 14,color: Colors.black),
                        //聚焦状态
                        autofocus: true,
                        decoration: InputDecoration(
                            contentPadding: EdgeInsets.only(bottom: 10),
                          //边框颜色
                          border: InputBorder.none,
                          //提示文字
                          hintText: '搜索'
                        ),

                      )),
                      _showClear?GestureDetector(
                        onTap: (){
                          _textController.clear();
                          _onChange('');
                        },
                        child: Icon(Icons.cancel,color: Colors.grey,),
                      )  :Container(),
                    ],
                  ),
                ),
                GestureDetector(
                  onTap: (){
                    Navigator.of(context).pop();
                  },
                  child: Text('取消'),
                )

              ],
            ),
          )
        ],
      ),
    );
  }
}